<template>
  <div class="approval">
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div class="head-title2">
        <div class="head-title">
          <div class="title">{{$t('approvalDetail.IDInfo')}}</div>
        </div>
      </div>
      <div class="id-info">
        <el-col :span="6">
          <div class="id-imgs">
            <div id="image">
              <div v-for="(item, index) in img1" :key="index">
                <div>
                  <span v-if="item.imageType === 1">{{$t('approvalDetail.idcard')}}</span>
                  <span v-if="item.imageType === 2">{{$t('approvalDetail.HandIDimg')}}</span>
                </div>
                <img :src="item.imagePathUrl" alt>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="detail-info">
            <div class="detail-info-item">
              <span>{{$t('approval.IdNumber')}}:</span>
              <span>{{info.cardNum}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('user.name')}}:</span>
              <span>{{info.realName}}</span>
            </div>
            <div class="detail-info-item">
              <span style="width: 70px;">{{$t('approvalDetail.province')}}:</span>
              <span>{{info.province}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.certifiedDate')}}:</span>
              <span>{{info.birthday}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('RiskManager.age')}}:</span>
              <span>{{info.appUserAge}}</span>
            </div>
            <div class="detail-info-item">
              <span style="width: 70px;">{{$t('approvalDetail.city')}}:</span>
              <span>{{info.city}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.BloodType')}}:</span>
              <span>{{info.bloodType}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.LargeAreaCode')}}:</span>
              <span>{{info.rt}}</span>
            </div>
            <div class="detail-info-item">
              <span style="width: 70px;">{{$t('approvalDetail.area')}}:</span>
              <span>{{info.district}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.nationality')}}:</span>
              <span>{{info.nationality}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.CellNumber')}}:</span>
              <span>{{info.rw}}</span>
            </div>
            <div class="detail-info-item">
              <span style="width: 70px;">{{$t('approvalDetail.village')}}:</span>
              <span>{{info.village}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.Occupation')}}:</span>
              <span>{{info.occupation}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.marriage')}}:</span>
              <span>{{info.maritalStatus}}</span>
            </div>
            <div class="detail-info-item">
              <span style="width: 70px;">{{$t('approvalDetail.DetailedAddress')}}:</span>
              <span>{{info.address}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.homeplace')}}:</span>
              <span>{{info.birthPlace}}</span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.paperDataDue')}}:</span>
              <span>{{info.expiryDate}}</span>
            </div>
          </div>
        </el-col>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div class="head-title2">
        <div class="title">{{$t('approvalDetail.SuppleInfor')}}</div>
      </div>
      <div class="id-photo">
        <div id="image2">
          <div v-for="(item, index) in img2" :key="index">
            <img :src="item.imagePathUrl" alt>
            <div class="supply-img">
              <span v-if="item.imageType === 3">{{$t('approvalDetail.imageType3')}}</span>
              <span v-if="item.imageType === 4">{{$t('approvalDetail.imageType4')}}</span>
              <span v-if="item.imageType === 5">{{$t('approvalDetail.imageType5')}}</span>
              <span v-if="item.imageType === 6">{{$t('approvalDetail.imageType6')}}</span>
              <span v-if="item.imageType === 7">{{$t('approvalDetail.imageType7')}}</span>
              <span v-if="item.imageType === 8">{{$t('approvalDetail.imageType8')}}</span>
              <span v-if="item.imageType === 9">{{$t('approvalDetail.imageType9')}}</span>
              <span v-if="item.imageType === 10">{{$t('approvalDetail.imageType10')}}</span>
              <span v-if="item.imageType === 11">{{$t('approvalDetail.imageType11')}}</span>
              <span v-if="item.imageType === 12">{{$t('approvalDetail.imageType12')}}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div class="head-title2">
        <div class="head-title">
          <div class="title">{{$t('approvalDetail.bankCardInfo')}}</div>
        </div>
      </div>
      <div class="detail-info">
        <el-col :span="4" >
          <div class="id-imgs">
            <div id="image3">
              <span>{{$t('approvalDetail.bankCards')}}</span>
              <img :src="img3.imagePathUrl" alt>
            </div>
          </div>
        </el-col>
        <el-col :span="18" style="margin:20px 0 0 20px;">
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.cardHolder')}}:</span>
            <span>{{info.realName}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 90px;">{{$t('approvalDetail.BankAccount')}}:</span>
            <span v-show="info.cardExist === 1" style="color: red;">{{info.bankCard}}</span>
            <span v-show="info.cardExist === 0" style="color: #8a8a8c;">{{info.bankCard}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.BankName')}}:</span>
            <span>{{info.bankName}}</span>
          </div>
        </el-col>
        
      </div>
    </el-card>
  </div>
</template>

<script>
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import { mapGetters } from "vuex";
import {
  getInfo,
  getImg
} from "api/trust/firstApprDetails/index";
import SUPPLEIMG from "assets/images/default-supple.jpg";
export default {
  data() {
    return {
      info: {},
      imgList: [],
      listObj: {},
      lanStatus: null,
      img1: [],
      img2: [],
      img3: {
        imageName: '',
        imagePathUrl: SUPPLEIMG,
        imagePath: '',
        imageType: 13
      },
      newSuppleList: [],
      imgUrl: [
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 3
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 4
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 5
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 6
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 7
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 8
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 9
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 10
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 11
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 12
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["elements", "language", "custQueryDetail"])
  },
  created() {
    this.getParamsDetail();
    if (this.language === "zh") {
      this.lanStatus = 1;
    } else if (this.language === "en") {
      this.lanStatus = 2;
    } else {
      this.lanStatus = 3;
    }
    this.getPersonInfo();
  },
  mounted() {
    this.viewer();
  },
  methods: {
    getParamsDetail() {
      this.listObj = this.custQueryDetail;
    },
    //身份信息
    getPersonInfo() {
      let per = {};
      per.orderId = this.listObj.orderId;
      per.userUUID = this.listObj.userUUID;
      per.userId = this.listObj.userId;
      per.userUuid = this.listObj.userUuid;
      per.msgType = this.lanStatus;
      getInfo(per).then(res => {
        let re = /(?=(?!\b)(\d{3})+$)/g;
        let str = String(res.data.applyAmt);
        res.data.applyAmt = str.replace(re, ",");
        this.info = res.data;
      });
    },
    compare(property) {
      return function(a, b) {
        let value1 = a[property];
        let value2 = b[property];
        return value1 - value2;
      };
    },
    viewer() {
      //获取图片
      let imgs = {};
      imgs.userId = this.listObj.userId;
      imgs.channel = this.listObj.channel;
      imgs.orderId = this.listObj.orderId;
      imgs.userUuid = this.listObj.userUuid;
      getImg(imgs).then(res => {
        this.imgList = res.data.imgPathList;
        let suppleList = [];
        this.imgList.forEach(item => {
          if (item.imageType === 1) {
            this.img1.push(item);
          } else if (item.imageType === 2) {
            this.img1.push(item);
          } else if (item.imageType === 13) {
            this.img3 = item
          } else {
            suppleList.push(item);
          }
        });
        for (let i = 0; i < this.imgUrl.length; i++) {
          let obj = this.imgUrl[i];
          let num = obj.imageType;
          let isExist = false;
          for (let j = 0; j < suppleList.length; j++) {
            let aj = suppleList[j];
            let n = aj.imageType;
            if (n == num) {
              isExist = true;
              break;
            }
          }
          if (!isExist) {
            this.newSuppleList.push(obj);
          }
        }
        this.img2 = this.newSuppleList.concat(suppleList);
        this.img2.sort(this.compare("imageType"));
        this.$nextTick(() => {
          const viewer = new Viewer(document.getElementById("image"));
          const viewer2 = new Viewer(document.getElementById("image2"));
          const viewer3 = new Viewer(document.getElementById("image3"));
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
input::-webkit-input-placeholder {
  font-size: 12px;
}
.approval-detail {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  position: relative;
}
.title {
  line-height: 22px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title:before {
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.detail-info {
  font-size: 12px;
  display: flex;
  margin-left: 12px;
  margin-top: 5px;
  .detail-info-item {
    width: 50%;
    line-height: 25px;
    display: flex;
    padding-right: 10px;
    box-sizing: border-box;
    span:nth-child(1) {
      display: inline-block;
      width: 80px;
      text-align: left;
      margin-right: 5px;
      color: #616264;
    }
    span:nth-child(2) {
      color: #8a8a8c;
      display: inline-block;
      line-height: 25px;
    }
    .flag-btn {
      display: inline-block;
      font-size: 12px;
      width: 65px;
      height: 22px;
      line-height: 19px;
      text-align: center;
      margin-left: 15px;
      font-weight: normal;
      cursor: pointer;
    }
    button[disabled] {
      background: #c8c9cc !important;
      color: #fff !important;
      border: 1px solid #c8c9cc !important;
    }
  }
  .contact-list {
    width: 90%;
    margin: 10px 5%;
  }
}
.head-title {
  display: flex;
  line-height: 22px;
  .info {
    line-height: 28px;
    border: 1px solid #333;
    margin-left: 20px;
    font-size: 12px;
    border-radius: 5px;
    padding: 0 8px;
  }
}
.head-title2 {
  display: flex;
  justify-content: space-between;
}
#image3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  img {
    width: 100%;
    display: block;
    margin: 3px auto;
  }
}
.id-info {
  display: flex;
  margin-left: 12px;
  margin-top: 5px;
  .id-imgs {
    #image {
      width: 100%;
      display: flex;
      font-size: 12px;
    }
    #image > div {
      width: 50%;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-right: 3%;
      span {
        display: inline-block;
        line-height: 25px;
      }
      img {
        width: 100%;
        height: 180px;
      }
    }
  }
  .detail-info {
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .detail-info-item {
      width: 33%;
      line-height: 30px;
      display: flex;
      flex-wrap: wrap;
      padding-right: 10px;
      box-sizing: border-box;
      span:nth-child(1) {
        display: inline-block;
        width: 105px;
        text-align: left;
        margin-right: 5px;
        color: #616264;
      }
      span:nth-child(2) {
        flex: 1;
        color: #8a8a8c;
        display: inline-block;
        line-height: 30px;
      }
      span:nth-child(3) {
        display: inline-block;
        width: 30px;
      }
    }
  }
}
.id-photo {
  padding: 10px 0;
  box-sizing: border-box;
  #image2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  #image2 > div {
    width: 18%;
    margin: 5px auto;
    img {
      width: 100%;
      height: 180px;
    }
  }
}
.supply-img {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  span {
    font-size: 14px;
  }
}
.click-img {
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
  background: #20a0ff;
  color: #fff;
  outline: none;
  border-width: 0;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 5px;
}
.hiddenInput {
  display: none;
}
.results {
  margin-left: 5px;
  color: #20a0ff;
  text-decoration: underline;
}
.cell-phone-item {
    width: 300px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: center;
    padding: 3px 0;
    &:last-child {
        border-bottom: 1px solid #ccc;
    }
}
.bg1 {
  background:#98e48b;
}
</style>